<layout name="page" />
<block name="content">
	{:widget('page_header/search',array('name'=>'联系人'))}
	<div class="operate-panel">
		<a class="btn btn-del" onclick="del()">删除</a>
		<i class="mid"></i>
		<a class="btn btn-normal" onclick="export_contact();">导出</a>
		<a class="btn btn-normal" onclick="import_contact();">导入</a>
		<i class="split"></i>
		<a class="btn btn-normal" onclick="add()">新建</a>
	</div>
	<div class="tab-box" id="select_letter">
		<div class="tab-header">
			<a>全部 </a>
			<a> A </a>
			<a> B </a>
			<a> C </a>
			<a> D </a>
			<a> E </a>
			<a> F </a>
			<a> G </a>
			<a> H </a>
			<a> I </a>
			<a> J </a>
			<a> K </a>
			<a> L </a>
			<a> M </a>
			<a> N </a>
			<a> O </a>
			<a> P </a>
			<a> Q </a>
			<a> R </a>
			<a> S </a>
			<a> T </a>
			<a> U </a>
			<a> V </a>
			<a> W </a>
			<a> X </a>
			<a> Y </a>
			<a> Z </a>
			<a> # </a>
		</div>
	</div>
	<div class="sub">
		<div class="table">
			<form method="post" name="form_data" id="form_data">
				<ul>
					<li class="thead">
						<span class="w3"><label class="checkbox">
								<input type="checkbox" name="id[]" value="{$vo.id}" class="toggle-select-all" data="id[]">
								<i class="icon"></i></label></span>
						<span class="w8">姓名 </span>
						<span class="w12 x2 ">公司</span>
						<span class="w8 x1 ">部门</span>
						<span class="w8 x1 ">职位</span>
						<span class="w16 x1 ">邮件</span>
						<span class="w13">手机</span>
					</li>
					<if condition="empty($list)">
						<li class="no-data">
							没找到数据
						</li>
						<else/>
						<foreach name="list" val="vo">
							<li class="tbody" letter="{$vo.letter}">
								<span class="w3"> <label class="checkbox">
										<input type="checkbox" name="id[]" value="{$vo.id}">
										<i class="icon"></i></label></span>
								<span class="w8 "><a href="{:url('edit',array('id'=>$vo['id']))}">{$vo.name}</a></span>
								<span class="w12 x2  ">{$vo.company}&nbsp;</span>
								<span class="w8 x1  ">{$vo.dept}&nbsp;</span>
								<span class="w8 x1  ">{$vo.position}&nbsp;</span>
								<span class="w16 x1 ">{$vo.email}&nbsp;</span>
								<span class="w13"><a href="tel:{$vo.mobile_tel}">{$vo.mobile_tel}</a></span>
							</li>
						</foreach>
					</if>
				</ul>
			</form>
		</div>
		<if condition="!empty($list)">
			{$page}
		</if>
	</div>
</block>
<block name="js">
	<script type="text/javascript">
		layui.use(['global'], function() {
			var $ = layui.jquery;
			set_return_url(null);

			var fn = {
				add : function() {
					window.open("{:url('add')}", "_self");
				},
				del : function() {
					if ($("input[name='id[]']:checked").length == 0) {
						layer.msg('请选择');
						return false;
					}
					layer.msg('确定要删除吗?', {
						time : 0,
						btn : ['确定', '取消'],
						yes : function(index) {
							var vars = $("#form_data").serialize();
							send_ajax("{:url('del')}", vars, function(ret) {
								if (ret.status) {
									layer.msg(ret.info, {
										time : 1200
									}, function() {
										location.reload(true);
									});
								}
							});
						},
						no : function(index) {
							layer.close(index);
						}
					});
				},
				import_contact : function() {
					window.open("{:url('import')}", "_self");
					return false;
				},
				export_contact : function() {
					window.open("{:url('export')}", "_new");
					return false;
				},
			};
			win_exp(fn);

			$('#select_letter a').on('click', function() {
				var search_letter = trim(this.innerText);
				$('#select_letter a').removeClass('active');
				$(this).addClass('active');
				if (search_letter == '全部') {
					$('#form_data li.tbody').show();
				} else {
					$('#form_data li.tbody').hide();
					$('#form_data li.tbody').each(function() {
						var key = $(this).attr('letter').substr(0, 1);
						if (search_letter == key) {
							$(this).show();
						}
					});
				}
			});
		});

	</script>
</block>